<template>
  <div class="contain">
    <div class="content">
      <div class="center"></div>
      <ul class="picker star-scrollbar">
        <li></li>
        <li></li>
        <li class="hover" v-for="(item,index) in hour" :key="index" @click="chooseH(item)" :class="{HActive: item.isSelect}">{{item.value}}</li>
        <li></li>
        <li></li>
      </ul>
      <ul class="picker star-scrollbar">
        <li></li>
        <li></li>
        <li class="hover" v-for="(item,index) in min" :key="index"  @click="chooseM(item)" :class="{MActive: item.isSelect}">{{item.value}}</li>
        <li></li>
        <li></li>
      </ul>
      <ul class="picker star-scrollbar">
        <li></li>
        <li></li>
        <li class="hover" v-for="(item,index) in sec" :key="index" @click="chooseS(item)" :class="{SActive: item.isSelect}">{{item.value}}</li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div>
      <button class="btn confirm" @click="confirm">确定</button>
    </div>
  </div>
</template>

<script>
let h = []
for(let i = 0; i<= 23; i++) {
  if(i < 10) {
    h.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    h.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let m = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    m.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    m.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let s = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    s.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    s.push({
      value: '' + i,
      isSelect: false
    })
  }
}
export default {
  props: {
    time: {
      type: String,
      default: '00:00:00'
    }
  },
  data() {
    return {
      hour: h,
      min: m,
      sec: s,
      h: '',
      m: '',
      s: ''
    }
  },
  created() {
    let arr = this.time.split(':')
    this.h = arr[0]
    this.m = arr[1]
    this.s = arr[2]
    this.hour.forEach(ele => {
      if(ele.value == this.h) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
   
    this.min.forEach(ele => {
      if(ele.value == this.m) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
    this.sec.forEach(ele => {
      if(ele.value == this.s) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
     this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.HActive').textContent)
      this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * num
    }) 
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.MActive').textContent)
      this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
    })
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.SActive').textContent)
      this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
    })
  },
  mounted() {
    let h = this.$el.querySelectorAll('.picker')[0]
    h.addEventListener('scroll', () => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[0].scrollTop / 30)
        this.hour.forEach(ele => {
          ele.isSelect = false
        })
        this.hour[current].isSelect = true
        this.h = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[0].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * current
      }, 300);
    })
    let m = this.$el.querySelectorAll('.picker')[1]
    m.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[1].scrollTop / 30)
      this.min.forEach(ele => {
          ele.isSelect = false
        })
        this.min[current].isSelect = true
        this.m = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[1].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * current
      }, 300);
    })
    let s = this.$el.querySelectorAll('.picker')[2]
    s.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[2].scrollTop / 30)
        this.sec.forEach(ele => {
          ele.isSelect = false
        })
        this.sec[current].isSelect = true
        this.s = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[2].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * current
      }, 300);
    })
  },
  methods: {
    chooseH(row) {
      this.hour.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.h = row.value
      this.m = '00'
      this.s = '00'
      this.min.forEach(ele => {
        ele.isSelect = false
      });
      this.min[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive').textContent)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
      })
      this.sec.forEach(ele => {
        ele.isSelect = false
      });
      this.sec[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive').textContent)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
      })
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.HActive').textContent)
        this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * num
      })
      this.send()
    },
    chooseM(row) {
      this.min.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.m = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive').textContent)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
      })
      this.send()
    },
    chooseS(row) {
      this.sec.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.s = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive').textContent)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
      })
      this.send()
    },
    send() {
      let time = this.h + ":" + this.m + ':' + this.s
      this.$emit('timeChange', time)
    },
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped lang="less">
  .contain {
    width: 180px;
  }
  .content {
    display: flex;
    position: relative;
    padding: 5px;
    .center {
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      width: 100%;
      height: 30px;
      border-top: 1px solid #EBEEF5;
      border-bottom: 1px solid #EBEEF5;
      z-index: -1;
    }
    .picker {
      width: 33%;
      height: 150px;
      overflow: auto;
      li {
        padding: 5px;
        min-height: 20px;
      }
      .hover {
        cursor: pointer;
        &:hover {
          background-color: #2FC0BE10;
        }
      }
    }
  }
  .HActive,.MActive,.SActive{
    background-color: #ccc!important;
  }
  .confirm {
    background-color: #2FC0BE;
    color: #fff;
  }
</style>